<template>
  <el-card
    class="box-card"
    style="width: 30%; display: inline-block; margin-left: 30px"
  >
    <div slot="header" class="clearfix">
      <span>{{ pname }}</span>
      <el-button
        style="float: right; padding: 3px 0"
        type="text"
        @click="handleClick(pid)"
      >
        商品详情 >
      </el-button>
    </div>
    <div class="text item">商品编号:&nbsp;&nbsp;&nbsp;{{ pid }}</div>
    <div class="text item">年利率(%):&nbsp;&nbsp;&nbsp;{{ prate }}</div>
    <div class="text item">起存金额(元):&nbsp;&nbsp;&nbsp;{{ pmin }}</div>
    <el-tag size="small">{{ psty }}</el-tag>
    <el-button
      type="danger"
      style="float: right; margin-bottom: 18px"
      @click="hasOrder(pid,pmin)"
    >
      立即存入
    </el-button>
  </el-card>
</template>

<script>
export default {
  name: "ListItem",
  props: {
    pid: {
      require: true,
      type: String,
    },
    pname: {
      require: true,
      type: String,
    },
    prate: {
      require: true,
      type: Number,
    },
    pmin: {
      require: true,
      type: Number,
    },
    psty: {
      require: true,
      type: String,
    },
  },
  methods: {
    handleClick(id) {
      this.$router.push("/detail/" + id);
    },
    hasOrder(id,min) {
      this.$emit("getOrder",[id,min]);
    }
  },
};
</script>